<!--  -->
<template>
  <div class="">
    <div class="search-header">
      <van-icon class="header-icon" name="arrow-left" @click="$router.go(-1)" />
      <van-search
        class="header-Search"
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
      >
        <template #action>
          <div>搜索</div>
        </template>
      </van-search>
    </div>
    <div class="search-content" show="isshow">
      <div class="Hotsearch"><van-icon name="star-o" />热门搜索</div>
      <!-- <div class="search-hotBotton">
                <div v-for="item in hotBotton">
                <van-button class="searchbtn" type="default" >{{item.query}}</van-button>
                </div>
            </div> -->
      <!-- <van-grid class="searchgrid" :border="false" :column-num="5" v-for="item in hotBotton">
                <van-grid-item>
                    <van-button type="primary" size="mini">{{ item.query }}</van-button>
                </van-grid-item>
            </van-grid> -->
      <van-row type="flex" justify="space-around">
        <van-col span="6">span: 6</van-col>
        <van-col span="6">span: 6</van-col>
        <van-col span="6">span: 6</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Toast } from "vant"
export default {
  //import引入的组件需要注入到对象中才能使用

  components: {},
  data () {
    //这里存放数据
    return {
      value: "",
      isshow: false,
      hotBotton: {},
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onSearch (val) {
      Toast(val)
      console.log(val)
      this.$router.push({ name: "SearchResult", params: { val: val } })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  // name: "get",
  created () {
    this.$axios.get("/hotSearch.json").then((res) => {
      this.hotBotton = res.data.data.hotWord.data
    })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less"  scoped>
.search-header {
  display: flex;

  .header-icon {
    font-size: 0.6rem;
    margin-left: 5px;
    margin-top: 17px;
  }

  .header-Search {
    flex: 2;
    margin-right: 10px;
  }
}

.search-content {
  border-top: 1px solid #b5b5b5;
  // padding: 15px;

  .Hotsearch {
    margin-left: 10px;
    margin-bottom: 10px;
  }

  .searchgrid {
    .searchbtn {
    }
  }
}
</style>